<template>
  <div class="download-page">
    <Header />
    
    <!-- Hero Section -->
    <section class="hero">
      <div class="container">
        <div class="hero-content">
          <h1 class="hero-title">下载安装</h1>
          <p class="hero-subtitle">
            选择适合您的部署方式，快速开始使用 Wu-Lazy-Cloud-Network
          </p>
        </div>
      </div>
    </section>

    <!-- Version Info -->
    <section class="version-info">
      <div class="container">
        <div class="version-card">
          <div class="version-header">
            <h2>当前版本</h2>
            <div class="version-badge">v1.3.4-JDK24-SNAPSHOT</div>
          </div>
          <div class="version-details">
            <div class="detail-item">
              <span class="label">发布日期</span>
              <span class="value">2025年8月</span>
            </div>
            <div class="detail-item">
              <span class="label">JDK 版本</span>
              <span class="value">JDK 24</span>
            </div>
            <div class="detail-item">
              <span class="label">Spring Boot</span>
              <span class="value">3.5.0</span>
            </div>
            <div class="detail-item">
              <span class="label">许可证</span>
              <span class="value">Apache License 2.0</span>
            </div>
          </div>
        </div>
      </div>
    </section>

    <!-- Download Options -->
    <section class="download-options">
      <div class="container">
        <div class="section-header">
          <h2 class="section-title">下载方式</h2>
          <p class="section-subtitle">支持多种部署方式，满足不同环境需求</p>
        </div>
        
        <div class="options-grid">
          <div class="option-card">
            <div class="option-header">
              <div class="option-icon">
                <el-icon><Box /></el-icon>
              </div>
              <h3>Docker 镜像</h3>
              <p>推荐使用，简单快速部署</p>
            </div>
            
            <div class="option-content">
              <h4>服务端镜像</h4>
              <div class="code-block">
                <pre><code class="language-bash"># 拉取镜像
docker pull registry.cn-hangzhou.aliyuncs.com/wu-lazy/wu-lazy-cloud-heartbeat-server:1.3.4-JDK24-SNAPSHOT

# 启动容器
docker run -d -it -p 6001:6001 -p 7001:7001 -p 8001:8001 -p 9001:9001 \
  --name wlcn-server \
  registry.cn-hangzhou.aliyuncs.com/wu-lazy/wu-lazy-cloud-heartbeat-server:1.3.4-JDK24-SNAPSHOT</code></pre>
              </div>
              
              <h4>客户端镜像</h4>
              <div class="code-block">
                <pre><code class="language-bash"># 拉取镜像
docker pull registry.cn-hangzhou.aliyuncs.com/wu-lazy/wu-lazy-cloud-heartbeat-client-start:1.3.4-JDK24-SNAPSHOT

# 启动容器
docker run -d -it --privileged -p 6004:6004 \
  --name wlcn-client \
  --restart=always \
  -e spring.lazy.netty.client.inet-host=YOUR_SERVER_IP \
  -e spring.lazy.netty.client.inet-port=7001 \
  -e spring.lazy.netty.client.client-id="your-client-id" \
  registry.cn-hangzhou.aliyuncs.com/wu-lazy/wu-lazy-cloud-heartbeat-client-start:1.3.4-JDK24-SNAPSHOT</code></pre>
              </div>
              
              <div class="option-actions">
                <a href="https://gitee.com/wujiawei1207537021/wu-lazy-cloud-network" target="_blank" class="btn btn-primary">
                  <el-icon><Platform /></el-icon>
                  查看源码
                </a>
              </div>
            </div>
          </div>
          
          <div class="option-card">
            <div class="option-header">
              <div class="option-icon">
                <el-icon><Download /></el-icon>
              </div>
              <h3>源码编译</h3>
              <p>从源码编译，适合开发环境</p>
            </div>
            
            <div class="option-content">
              <h4>环境要求</h4>
              <ul>
                <li>JDK 24 或 JDK 17+</li>
                <li>Maven 3.6+</li>
                <li>MySQL 8.0+ (可选)</li>
                <li>Git 2.30+</li>
              </ul>
              
              <h4>编译步骤</h4>
              <div class="code-block">
                <pre><code class="language-bash"># 克隆项目
git clone https://gitee.com/wujiawei1207537021/wu-lazy-cloud-network.git
cd wu-lazy-cloud-network

# 编译项目
mvn clean package -DskipTests

# 启动服务端
cd wu-lazy-cloud-heartbeat-start/wu-lazy-cloud-heartbeat-server-start
java -jar target/wu-lazy-cloud-heartbeat-server-start-1.3.4-JDK24-SNAPSHOT.jar

# 启动客户端
cd ../wu-lazy-cloud-heartbeat-client-start
java -jar target/wu-lazy-cloud-heartbeat-client-start-1.3.4-JDK24-SNAPSHOT.jar</code></pre>
              </div>
              
              <div class="option-actions">
                <a href="https://gitee.com/wujiawei1207537021/wu-lazy-cloud-network" target="_blank" class="btn btn-outline">
                  <el-icon><Platform /></el-icon>
                  下载源码
                </a>
              </div>
            </div>
          </div>
          
          <div class="option-card">
            <div class="option-header">
              <div class="option-icon">
                <el-icon><Setting /></el-icon>
              </div>
              <h3>预编译包</h3>
              <p>直接下载预编译的 JAR 包</p>
            </div>
            
            <div class="option-content">
              <h4>下载链接</h4>
              <div class="download-links">
                <div class="download-link">
                  <span class="link-label">服务端</span>
                  <a href="https://gitee.com/wujiawei1207537021/wu-lazy-cloud-network/releases" target="_blank" class="link-url">
                    wu-lazy-cloud-heartbeat-server-start-1.3.4-JDK24-SNAPSHOT.jar
                  </a>
                </div>
                <div class="download-link">
                  <span class="link-label">客户端</span>
                  <a href="https://gitee.com/wujiawei1207537021/wu-lazy-cloud-network/releases" target="_blank" class="link-url">
                    wu-lazy-cloud-heartbeat-client-start-1.3.4-JDK24-SNAPSHOT.jar
                  </a>
                </div>
                <div class="download-link">
                  <span class="link-label">集群版</span>
                  <a href="https://gitee.com/wujiawei1207537021/wu-lazy-cloud-network/releases" target="_blank" class="link-url">
                    wu-lazy-cloud-heartbeat-server-cluster-start-1.3.4-JDK24-SNAPSHOT.jar
                  </a>
                </div>
              </div>
              
              <h4>启动命令</h4>
              <div class="code-block">
                <pre><code class="language-bash"># 服务端启动
java -jar wu-lazy-cloud-heartbeat-server-start-1.3.4-JDK24-SNAPSHOT.jar

# 客户端启动
java -jar wu-lazy-cloud-heartbeat-client-start-1.3.4-JDK24-SNAPSHOT.jar</code></pre>
              </div>
              
              <div class="option-actions">
                <a href="https://gitee.com/wujiawei1207537021/wu-lazy-cloud-network/releases" target="_blank" class="btn btn-outline">
                  <el-icon><Download /></el-icon>
                  下载 JAR 包
                </a>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>

    <!-- Deployment Globe -->
    <section class="deployment-guide">
      <div class="container">
        <div class="section-header">
          <h2 class="section-title">部署指南</h2>
          <p class="section-subtitle">详细的部署说明和最佳实践</p>
        </div>
        
        <div class="guide-content">
          <div class="guide-tabs">
            <el-tabs v-model="activeGlobeTab">
              <el-tab-pane label="Docker 部署" name="docker">
                <div class="guide-section">
                  <h3>Docker 部署指南</h3>
                  
                  <h4>1. 环境准备</h4>
                  <ul>
                    <li>安装 Docker 20.10+</li>
                    <li>确保 Docker 服务正在运行</li>
                    <li>准备公网 IP 地址（服务端）</li>
                  </ul>
                  
                  <h4>2. 启动服务端</h4>
                  <div class="code-block">
                    <pre><code class="language-bash"># 拉取镜像
docker pull registry.cn-hangzhou.aliyuncs.com/wu-lazy/wu-lazy-cloud-heartbeat-server:1.3.4-JDK24-SNAPSHOT

# 启动容器
docker run -d -it -p 6001:6001 -p 7001:7001 -p 8001:8001 -p 9001:9001 \
  --name wlcn-server \
  registry.cn-hangzhou.aliyuncs.com/wu-lazy/wu-lazy-cloud-heartbeat-server:1.3.4-JDK24-SNAPSHOT</code></pre>
                  </div>
                  
                  <h4>3. 启动客户端</h4>
                  <div class="code-block">
                    <pre><code class="language-bash"># 拉取镜像
docker pull registry.cn-hangzhou.aliyuncs.com/wu-lazy/wu-lazy-cloud-heartbeat-client-start:1.3.4-JDK24-SNAPSHOT

# 启动容器（替换 YOUR_SERVER_IP 为实际服务端 IP）
docker run -d -it --privileged -p 6004:6004 \
  --name wlcn-client \
  --restart=always \
  -e spring.lazy.netty.client.inet-host=YOUR_SERVER_IP \
  -e spring.lazy.netty.client.inet-port=7001 \
  -e spring.lazy.netty.client.client-id="your-client-id" \
  registry.cn-hangzhou.aliyuncs.com/wu-lazy/wu-lazy-cloud-heartbeat-client-start:1.3.4-JDK24-SNAPSHOT</code></pre>
                  </div>
                  
                  <h4>4. 验证部署</h4>
                  <ul>
                    <li>访问服务端管理界面: <code>http://服务端IP:6001/netty-server-ui/index.html</code></li>
                    <li>访问客户端管理界面: <code>http://客户端IP:6004/netty-client-local-ui/index.html</code></li>
                    <li>默认登录信息: admin/admin</li>
                  </ul>
                </div>
              </el-tab-pane>
              
              <el-tab-pane label="源码部署" name="source">
                <div class="guide-section">
                  <h3>源码部署指南</h3>
                  
                  <h4>1. 环境准备</h4>
                  <ul>
                    <li>安装 JDK 24 或 JDK 17+</li>
                    <li>安装 Maven 3.6+</li>
                    <li>安装 Git 2.30+</li>
                    <li>准备 MySQL 8.0+ (可选)</li>
                  </ul>
                  
                  <h4>2. 获取源码</h4>
                  <div class="code-block">
                    <pre><code class="language-bash"># 克隆项目
git clone https://gitee.com/wujiawei1207537021/wu-lazy-cloud-network.git
cd wu-lazy-cloud-network

# 切换到稳定版本
git checkout v1.3.4-JDK24-SNAPSHOT</code></pre>
                  </div>
                  
                  <h4>3. 编译项目</h4>
                  <div class="code-block">
                    <pre><code class="language-bash"># 编译所有模块
mvn clean package -DskipTests

# 或者编译特定模块
mvn clean package -pl wu-lazy-cloud-heartbeat-server-start -am -DskipTests
mvn clean package -pl wu-lazy-cloud-heartbeat-client-start -am -DskipTests</code></pre>
                  </div>
                  
                  <h4>4. 启动应用</h4>
                  <div class="code-block">
                    <pre><code class="language-bash"># 启动服务端
cd wu-lazy-cloud-heartbeat-start/wu-lazy-cloud-heartbeat-server-start
java -jar target/wu-lazy-cloud-heartbeat-server-start-1.3.4-JDK24-SNAPSHOT.jar

# 启动客户端
cd ../wu-lazy-cloud-heartbeat-client-start
java -jar target/wu-lazy-cloud-heartbeat-client-start-1.3.4-JDK24-SNAPSHOT.jar</code></pre>
                  </div>
                </div>
              </el-tab-pane>
              
              <el-tab-pane label="集群部署" name="cluster">
                <div class="guide-section">
                  <h3>集群部署指南</h3>
                  
                  <h4>1. 集群架构</h4>
                  <p>支持多节点集群部署，提供高可用性和负载均衡</p>
                  
                  <h4>2. 节点配置</h4>
                  <div class="code-block">
                    <pre><code class="language-yaml">spring:
  lazy:
    netty:
      server:
        mode: cluster
        node-id: node-1
        node-host: 192.168.1.100
        node-port: 7001</code></pre>
                  </div>
                  
                  <h4>3. 启动集群节点</h4>
                  <div class="code-block">
                    <pre><code class="language-bash"># 启动集群服务端
cd wu-lazy-cloud-heartbeat-start/wu-lazy-cloud-heartbeat-server-cluster-start
java -jar target/wu-lazy-cloud-heartbeat-server-cluster-start-1.3.4-JDK24-SNAPSHOT.jar</code></pre>
                  </div>
                  
                  <h4>4. 负载均衡</h4>
                  <ul>
                    <li>使用 Nginx 进行负载均衡</li>
                    <li>配置健康检查和故障转移</li>
                    <li>支持会话保持</li>
                  </ul>
                </div>
              </el-tab-pane>
            </el-tabs>
          </div>
        </div>
      </div>
    </section>

    <!-- System Requirements -->
    <section class="system-requirements">
      <div class="container">
        <div class="section-header">
          <h2 class="section-title">系统要求</h2>
          <p class="section-subtitle">确保您的环境满足运行要求</p>
        </div>
        
        <div class="requirements-grid">
          <div class="requirement-card">
            <div class="requirement-header">
              <el-icon><Monitor /></el-icon>
              <h3>操作系统</h3>
            </div>
            <ul>
              <li>Linux (Ubuntu 18.04+, CentOS 7+)</li>
              <li>Windows 10+</li>
              <li>macOS 10.15+</li>
            </ul>
          </div>
          
          <div class="requirement-card">
            <div class="requirement-header">
              <el-icon><Cpu /></el-icon>
              <h3>Java 环境</h3>
            </div>
            <ul>
              <li>JDK 24 (推荐)</li>
              <li>JDK 17+ (最低要求)</li>
              <li>JVM 内存: 512MB+</li>
            </ul>
          </div>
          
          <div class="requirement-card">
            <div class="requirement-header">
              <el-icon><DataBase /></el-icon>
              <h3>数据库</h3>
            </div>
            <ul>
              <li>MySQL 8.0+ (生产环境)</li>
              <li>H2 2.1+ (开发环境)</li>
              <li>支持自动初始化</li>
            </ul>
          </div>
          
          <div class="requirement-card">
            <div class="requirement-header">
              <el-icon><Connection /></el-icon>
              <h3>网络要求</h3>
            </div>
            <ul>
              <li>服务端需要公网 IP</li>
              <li>端口 6001, 7001, 8001, 9001</li>
              <li>客户端端口 6004, 8002, 9002</li>
            </ul>
          </div>
        </div>
      </div>
    </section>

    <Footer />
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import Header from '@/components/Header.vue'
import Footer from '@/components/Footer.vue'
import { 
  Box, 
  Download, 
  Setting, 
  Platform,
  Monitor,
  Cpu,
  // DataBase,   // 替换 DataBase
  Connection,
  // Server,    // 替换 Server
  // Globe       // 替换 Globe
} from '@element-plus/icons-vue'

const activeGlobeTab = ref('docker')

onMounted(() => {
  // 高亮代码块
  if (window.Prism) {
    window.Prism.highlightAll()
  }
})
</script>

<style lang="scss" scoped>
.download-page {
  min-height: 100vh;
}

// Hero Section
.hero {
  padding: 120px 0 60px;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
  text-align: center;
  
  .hero-title {
    font-size: 48px;
    font-weight: 700;
    margin-bottom: 16px;
    
    @media (max-width: 768px) {
      font-size: 32px;
    }
  }
  
  .hero-subtitle {
    font-size: 18px;
    opacity: 0.9;
    max-width: 600px;
    margin: 0 auto;
  }
}

// Version Info
.version-info {
  padding: 60px 0;
  background: var(--background-color);
}

.version-card {
  max-width: 600px;
  margin: 0 auto;
  background: white;
  border-radius: 12px;
  padding: 40px;
  box-shadow: var(--shadow-light);
  text-align: center;
  
  .version-header {
    margin-bottom: 30px;
    
    h2 {
      font-size: 24px;
      font-weight: 600;
      color: var(--text-primary);
      margin-bottom: 16px;
    }
    
    .version-badge {
      display: inline-block;
      background: var(--primary-color);
      color: white;
      padding: 8px 16px;
      border-radius: 6px;
      font-weight: 600;
      font-size: 16px;
    }
  }
  
  .version-details {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 20px;
    
    .detail-item {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 12px 0;
      border-bottom: 1px solid var(--border-light);
      
      .label {
        color: var(--text-regular);
        font-weight: 500;
      }
      
      .value {
        color: var(--text-primary);
        font-weight: 600;
      }
    }
  }
}

// Section Header
.section-header {
  text-align: center;
  margin-bottom: 60px;
  
  .section-title {
    font-size: 36px;
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: 16px;
    
    @media (max-width: 768px) {
      font-size: 28px;
    }
  }
  
  .section-subtitle {
    font-size: 18px;
    color: var(--text-regular);
    max-width: 600px;
    margin: 0 auto;
  }
}

// Download Options
.download-options {
  padding: 80px 0;
  background: var(--background-light);
}

.options-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
  gap: 30px;
}

.option-card {
  background: white;
  border-radius: 12px;
  padding: 30px;
  box-shadow: var(--shadow-light);
  transition: transform 0.3s ease;
  
  &:hover {
    transform: translateY(-4px);
  }
  
  .option-header {
    text-align: center;
    margin-bottom: 30px;
    
    .option-icon {
      width: 60px;
      height: 60px;
      background: var(--primary-color);
      border-radius: 12px;
      display: flex;
      align-items: center;
      justify-content: center;
      margin: 0 auto 16px;
      
      .el-icon {
        font-size: 28px;
        color: white;
      }
    }
    
    h3 {
      font-size: 20px;
      font-weight: 600;
      color: var(--text-primary);
      margin-bottom: 8px;
    }
    
    p {
      color: var(--text-regular);
      font-size: 14px;
    }
  }
  
  .option-content {
    h4 {
      font-size: 16px;
      font-weight: 600;
      color: var(--text-primary);
      margin-bottom: 12px;
    }
    
    ul {
      list-style: none;
      margin-bottom: 20px;
      
      li {
        color: var(--text-regular);
        margin-bottom: 6px;
        position: relative;
        padding-left: 16px;
        
        &::before {
          content: '•';
          position: absolute;
          left: 0;
          color: var(--primary-color);
        }
      }
    }
    
    .download-links {
      margin-bottom: 20px;
      
      .download-link {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 8px 0;
        border-bottom: 1px solid var(--border-light);
        
        .link-label {
          font-weight: 500;
          color: var(--text-primary);
        }
        
        .link-url {
          color: var(--primary-color);
          text-decoration: none;
          font-size: 14px;
          
          &:hover {
            text-decoration: underline;
          }
        }
      }
    }
    
    .option-actions {
      text-align: center;
      margin-top: 20px;
    }
  }
}

// Deployment Globe
.deployment-guide {
  padding: 80px 0;
  background: var(--background-color);
}

.guide-content {
  max-width: 1000px;
  margin: 0 auto;
}

.guide-section {
  h3 {
    font-size: 24px;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 20px;
  }
  
  h4 {
    font-size: 18px;
    font-weight: 600;
    color: var(--text-primary);
    margin: 20px 0 12px;
  }
  
  ul {
    list-style: none;
    margin-bottom: 20px;
    
    li {
      color: var(--text-regular);
      margin-bottom: 6px;
      position: relative;
      padding-left: 16px;
      
      &::before {
        content: '•';
        position: absolute;
        left: 0;
        color: var(--primary-color);
      }
    }
  }
  
  code {
    background: var(--background-light);
    padding: 2px 6px;
    border-radius: 4px;
    font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
    font-size: 14px;
  }
}

// System Requirements
.system-requirements {
  padding: 80px 0;
  background: var(--background-light);
}

.requirements-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 30px;
}

.requirement-card {
  background: white;
  border-radius: 12px;
  padding: 30px;
  box-shadow: var(--shadow-light);
  
  .requirement-header {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 20px;
    
    .el-icon {
      font-size: 24px;
      color: var(--primary-color);
    }
    
    h3 {
      font-size: 18px;
      font-weight: 600;
      color: var(--text-primary);
    }
  }
  
  ul {
    list-style: none;
    
    li {
      color: var(--text-regular);
      margin-bottom: 8px;
      position: relative;
      padding-left: 16px;
      
      &::before {
        content: '✓';
        position: absolute;
        left: 0;
        color: var(--success-color);
        font-weight: bold;
      }
    }
  }
}
</style> 